<template>
  <div>
    <a-modal title="供应商接单" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="1200px" :mask-closable="false">
      <div>
        <div class="title-bar">基础信息</div>
        <a-row style="padding: 0 20px">
          <a-col :span="8">
            <div class="detail-item">
              <div class="label">采购单号： </div>
              <div class="value">{{ info.billNo }}</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <div class="label">提交日期： </div>
              <div class="value">{{ $setTime(info.gmtAudit, 'YYYY/MM/DD HH:mm') }}</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <div class="label">状态： </div>
              <div class="value">{{ statusMap[info.status] }}</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <div class="label">经销商： </div>
              <div class="value">{{ info.companyName }}</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <div class="label">采购员： </div>
              <div class="value">{{ info.purchaseUname }}</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <div class="label">结算方式： </div>
              <div class="value">{{ info.settleType == 1 ? '现结' : '月结' }}</div>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="detail-item">
              <div class="label">附件： </div>
              <div class="value">
                <span class="cursor highlight" @click="download(info.attachment)" v-if="info.attachment">下载</span>
              </div>
            </div>
          </a-col>
          <a-col :span="16">
            <div class="detail-item">
              <div class="label">备注： </div>
              <div class="value">{{ info.remark }}</div>
            </div>
          </a-col>
        </a-row>
        <div class="title-bar">采购订单明细</div>
        <a-table size="mini" class="table-two-line" :summary="summary" :data="list" :pagination="false" :scroll="{ y: 500 }">
          <template #columns>
            <a-table-column title="图片" #cell="{ record }" :width="60" fixed="left">
              <ImgPopover :src="record.productImg">
                <template #con>
                  <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                </template>
              </ImgPopover>
            </a-table-column>
            <a-table-column title="产品名称" #cell="{ record }" :width="120" fixed="left">
              <TextHidden :rows="1" position="top">{{ record.productName }}</TextHidden>
            </a-table-column>
            <a-table-column title="供应商SKU" #cell="{ record }" :width="120" fixed="left">
              <TextHidden position="top">
                {{ record.ssku }}
              </TextHidden>
            </a-table-column>
            <a-table-column title="经销商SKU" #cell="{ record }" :width="120" fixed="left">
              <TextHidden position="top" :rowsWidth="110">
                {{ record.sku }}
              </TextHidden>
            </a-table-column>

            <a-table-column title="规格" #cell="{ record }" :width="120" fixed="left">
              <TextLimit position="top">{{ getSpecName(record) }}</TextLimit>
            </a-table-column>

            <a-table-column title="期望交期" #cell="option" :width="140" fixed="left" data-index="gmtPlanDelivery">
              <div>{{ $setTime(option.record.gmtPlanDelivery, 'YYYY/MM/DD') }}</div>
              <div v-if="option.record.gmtPlanDelivery">
                <div style="color: red" v-if="!toCheckDay(option.record.gmtPlanDelivery).type">超时{{ toCheckDay(option.record.gmtPlanDelivery).day }}天</div>
                <div class="highlight" v-else>剩余{{ toCheckDay(option.record.gmtPlanDelivery).day }}天</div>
              </div>
            </a-table-column>
            <a-table-column title="采购数" #cell="{ record }" :width="80" data-index="purchaseAmt">
              {{ record.purchaseAmt }}
            </a-table-column>
            <a-table-column title="截单数" #cell="{ record }" :width="80">
              {{ record.cutoffAmt }}
            </a-table-column>
            <!-- <a-table-column title="交货数" #cell="{ record }" :width="80">
              {{ record.deliveryAmt }}
            </a-table-column>
            <a-table-column title="实际交货数" #cell="{ record }" :width="80">
              {{ record.deliveryRealAmt }}
            </a-table-column>
            <a-table-column title="已入库数" #cell="{ record }" :width="80">
              {{ record.warehouseRealAmt }}
            </a-table-column>
            <a-table-column title="未入库数" #cell="{ record }" :width="80">
              {{ record.warehouseNotAmt }}
            </a-table-column> -->
            <a-table-column title="税率" #cell="{ record }" :width="80"> {{ record.rate }}% </a-table-column>
            <a-table-column title="采购单价" #cell="{ record }" :width="80">
              <div class="highlight">{{ record.priceType ? '含税' : '不含税' }}</div>
              <div>￥{{ record.price }}</div>
            </a-table-column>
            <a-table-column title="采购金额" #cell="{ record }" :width="80" data-index="purchaseValue">
              <div class="highlight">{{ record.priceType ? '含税' : '不含税' }}</div>
              <div> ￥{{ record.purchaseValue }}</div>
            </a-table-column>
            <!-- <a-table-column title="入库货值" #cell="{ record }" :width="80">
              {{ record.inventoryValue }}
            </a-table-column> -->
            <a-table-column title="备注" #cell="{ record }" :width="120">
              <TextHidden position="top" :rowsWidth="70">
                {{ record.remark }}
              </TextHidden>
            </a-table-column>
          </template>
          <template #summary-cell="{ column, record, rowIndex }">
            <div>{{ record[column.dataIndex] }}</div>
          </template>
        </a-table>
      </div>
      <template #footer>
        <a-popover v-model:popup-visible="showPoper">
          <a-button class="gray-outline">拒绝接单</a-button>
          <template #content>
            <p>请填写拒绝理由：</p>
            <div style="width: 280px">
              <a-textarea v-model="rejectMsg" placeholder="请输入" allow-clear />
            </div>
            <div style="text-align: right">
              <a-button type="primary" @click="reject">确认</a-button>
            </div>
          </template>
        </a-popover>

        <a-button type="primary" :loading="loading" class="ml10" @click="handleOk">确认接单</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { supplierReceivePurchaseOrder } from '@/api/supplier'
  export default defineComponent({
    props: ['info'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        loading: false,
        list: [],
        rejectMsg: '',
        showPoper: false,
        statusMap: {
          '20': '待接单',
          '30': '待交货',
          '40': '交货中',
          '50': '已交货',
          '60': '已完成',
          '70': '已取消',
        },
      })

      const open = () => {
        data.list = props.info.billItems
      }
      const handleOk = async () => {
        let params = {
          ids: [props.info.id],
          pass: true,
          remark: '',
        }
        const res: any = await supplierReceivePurchaseOrder(params)
        if (res) {
          Message.success('接单成功')
          data.rejectMsg = ''
          data.showPoper = false
          handleCancel()
          emit('save')
        }
      }
      const handleCancel = () => {
        visible.value = false
      }

      const summary = () => {
        let purchaseAmt = 0
        let purchaseValue = 0
        data.list.forEach((e: any) => {
          purchaseAmt += e.purchaseAmt
          purchaseValue += e.purchaseValue
        })
        return [
          {
            gmtPlanDelivery: '合计',
            purchaseAmt,
            purchaseValue: `￥${purchaseValue}`,
          },
        ]
      }

      const reject = async () => {
        if (!data.rejectMsg) {
          return Message.error('请输入拒绝接单原因')
        }
        let params = {
          ids: [props.info.id],
          pass: false,
          remark: data.rejectMsg,
        }
        const res: any = await supplierReceivePurchaseOrder(params)
        if (res) {
          Message.error('拒绝接单成功')
          data.rejectMsg = ''
          data.showPoper = false
          handleCancel()
          emit('save')
        }
      }

      const download = (url: string) => {
        let a = document.createElement('a')
        a.href = url
        a.click()
      }

      const toCheckDay = (time: any) => {
        let date = new Date(time).valueOf() + 24 * 60 * 60 * 1000
        let newDate = new Date().valueOf()
        let timeStr = date - newDate
        if (timeStr < 0) {
          let daty = Math.abs(timeStr) / (24 * 60 * 60 * 1000)
          return {
            type: false,
            day: Math.ceil(daty),
          }
        } else {
          let daty = Math.abs(timeStr) / (24 * 60 * 60 * 1000)
          return {
            type: true,
            day: Math.ceil(daty),
          }
        }
      }

      const getSpecName = (info: any) => {
        let item: any = info ? JSON.parse(info.productSpecs) : []
        return item.map((e: any) => e.valueCn).join(',')
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        summary,
        reject,
        download,
        toCheckDay,
        getSpecName,
      }
    },
  })
</script>

<style lang="less" scoped>
  .arco-col {
    margin-bottom: 5px;
  }

  .detail-item {
    display: flex;

    .label {
      width: 80px;
      text-align: right;
    }
    .value {
      flex: 1;
    }
  }
</style>
